<template>
    <a-form-item :label="Option.Label" :required="required">
        <a-input size="small" :disabled="readonly" v-model:value="InputValue">
            <template #suffix>
                {{ Option.Unit }}
            </template>
        </a-input>
    </a-form-item>
</template>
<script setup>
import { ref, watch, watchEffect } from 'vue';

const emit = defineEmits(['update:modelValue'])
const props = defineProps({
    Option: Object,
    modelValue: String,
});

const required = ref(false);
const readonly = ref(false);

watchEffect(() => {
    if (props.Option.Rule) {
        required.value = !!props.Option.Rule.required
    } else {
        required.value = false;
    }
    readonly.value = !!props.Option.readonly
})

const InputValue = ref();

watch(() => props.modelValue, val => {
    InputValue.value = val;
}, { immediate: true });

watch(InputValue, (val) => {
    emit('update:modelValue', val);
})






</script>
<style lang="less" scoped>

</style>